<template>
  <div class="echartsPage">
    <div id="main"></div>
  </div>
</template>

<script setup>
import { useGlobal } from '@/hooks/system/useGlobal'
const { $nextTick } = useGlobal()

const xData = ['文昌街道', '沙河街道', '永安街道', '平里店', '驿道镇', '朱桥镇', '金城镇']
const yData = [120, 200, 150, 80, 70, 110, 130]

// 渐变色
const linearGradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  {
    offset: 1,
    color: '#01297F',
  },
  {
    offset: 0.5,
    color: '#1493b8',
  },
  {
    offset: 0,
    color: '#01FEF6',
  },
])

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  xAxis: {
    type: 'category',
    data: xData,
    axisLabel: {
      show: true,
      textStyle: {
        color: '#1194FE',
      },
    },
    axisLine: {
      lineStyle: {
        color: '#1194FE',
      },
    },
  },
  yAxis: {
    type: 'value',
    name: '单位：元',
    axisLabel: {
      show: true,
      textStyle: {
        color: '#1194FE',
      },
    },
    // 坐标轴在 grid 区域中的分隔线
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#1194FE'],
        width: 2,
        type: 'solid',
      },
    },
  },
  series: [
    {
      type: 'bar',
      data: yData,
      barWidth: 20, // 柱子宽度
      itemStyle: {
        // 柱样式
        color: linearGradient,
      },
    },
  ],
}

$nextTick(() => {
  const chartDom = document.getElementById('main')
  const myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
})
</script>

<style scoped>
.echartsPage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
#main {
  margin: 0 auto;
  border: 1px solid #c7c7c7;
  width: 800px;
  height: 50%;
  background-color: #fff;
}
</style>
